<!--考核项详情-->
<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in" ref="dialogBox">
      <div class="cornerComment-in-title">
        <span>新增/编辑幼儿接送家长信息</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <div class="setinfobox">
          <div class="setinfobox-left"
               v-loading="loadingStatus"
               element-loading-text="加载中"
               element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(0, 0, 0, 0.5)">
            <div class="setinfobox-left-c">
              <component
                  v-bind:is="item.propertyType"
                  :property.sync="item"
                  v-for="(item, index) in getPower"
                  :key="index"
                  @updateVal="updateVal"
              ></component>
              <el-input v-model="editForm.name" auto-complete="off" placeholder="姓名" size="small" class="mr-10" :clearable="true"></el-input>
              <el-button size="small" type="primary" plain @click="getStudentFn">查询</el-button>
            </div>
            <div class="setinfobox-left-list">
              <div class="setinfobox-left-list-title">
                <div class="setinfobox-left-list-inline">
                  <span>姓名</span>
                  <span>班级</span>
                  <span>学号</span>
                  <span></span>
                </div>
              </div>
              <div class="setinfobox-left-list-body" v-if="studentList.length">
                <div class="setinfobox-left-list-line setinfobox-list" v-for="(item, index) in studentList" :key="'s'+index"
                     :class="{'active': activeId&& activeId.id==item.id}"
                     @click="activeFn(item)">
                  <span>{{ item.name }}</span>
                  <span>{{ item.classes? `【${item.classes.class_name}】`: ''}}</span>
                  <span>{{ item.seat_number }}</span>
                  <span>
                    <i class="iconfont iconqueren-zhengque" v-if="activeId&& activeId.id==item.id"></i>
                  </span>
                </div>
              </div>
              <div class="setinfobox-left-list-body" v-else>
                <p>查询学生信息</p>
              </div>
            </div>
          </div>
          <div class="setinfobox-right"
               v-loading="loadingStatus"
               element-loading-text="加载中"
               element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(0, 0, 0, 0.5)">
            <div class="setinfobox-right-title">
              {{ activeId ? `【${activeId.name}】` : '' }}接送信息
            </div>
            <div class="setinfobox-right-body" v-if="pickInfo.length">
              <div class="setinfobox-right-body-top-from" v-for="(item,index) in pickInfo" :key="'from'+index">
                <el-form ref="form" label-width="110px">
                  <el-form-item label="接送人称呼">
                    <el-input v-model="item.relation" size="small" placeholder="请输入接送人称呼"></el-input>
                  </el-form-item>
<!--                  <el-form-item label="接送人身份证">-->
<!--                    <el-input v-model="item.identity_card" size="small" placeholder="请输入接送人身份证"></el-input>-->
<!--                  </el-form-item>-->
                  <el-form-item label="接送人近照">
                    <div>
                      <el-upload
                          class="avatar-uploader"
                          :action="$uploadZipImg"
                          accept="image/jpg,image/jpeg,image/png"
                          :show-file-list="false"
                          :on-success="handleAvatarSuccess"
                          :before-upload="beforeAvatarUpload">
                        <img v-if="item.pic" :src="`${item.pic}`" class="avatar"
                             @click="uploadImg(index)">
                        <i v-else class="el-icon-plus avatar-uploader-icon" @click="uploadImg(index)"></i>
                      </el-upload>
                    </div>
                    <el-button size="mini" plain @click="detelFn(item,index)">删除</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <div class="setinfobox-right-body" v-else>
              <p>暂无数据</p>
            </div>
            <div class="setinfobox-right-body-footer">
              <el-button size="mini" plain @click="addPickUserFn">添加接送人</el-button>
              <el-button size="mini" type="primary" plain @click="saveFn()">确认并保存</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click="closePOpup" size="mini">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {classesStudent} from '@/api/admin/student'
import {pick_upAdd, pick_upDetail} from '@/api/admin/ClassDynamics'

export default {
  props: ['visible'],
  components: {},
  data() {
    return {
      dialogVisible: false,
      form: {},
      studentList: [],
      editForm: {
        class_id: '', // 班级id
        section_id: '', // 年段id
        name: ''
      }, // 编辑界面数据
      getPower: {
        'section_id': {
          name: 'section_id', // key名称
          default: '', // 默认值
          propertyType: "Select", // 组件名称
          placeholder: '年段', // 默认值
          valueText: '', // 值
          leve: 2,
          api: this.api.user_sectionindex, // 下拉框的请求接口
          keyName: 'section_name',// 调用的字段
          child: [
            {
              name: 'class_id',
              default: '',
              propertyType: "",
              placeholder: '班级',
              valueText: '',
              api: this.api.user_classesindex,
              keyName: 'class_name',
            }
          ]
        }
      },
      activeId: null,
      pickInfo: [],
      studentInfo: [],
      studentId: [],
      loadingStatus: false,
      uploadIndex: 0,
      delList: []
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (!this.visible) {
        let newGetPower = this.getJson(this.getPower)
        newGetPower['section_id'].valueText = ''
        newGetPower['section_id'].child[0].valueText = ''
        this.getPower = newGetPower
        this.editForm = {
          class_id: '', // 班级id
          section_id: '', // 年段id
          name: ''
        } // 编辑界面数据
        this.clearDataFn()
      }
    }
  },
  created() {
  },
  methods: {
    activeFn(item) {
      let n = this
      this.activeId = item
      this.loadingStatus = true
      // 请求就送信息 获取接送信息
      pick_upDetail({id: item.id}).then(res => {
        console.log(res)
        this.pickInfo = res.list
        this.studentInfo = res.student
        this.studentId = res.student_id
        setTimeout(() => {
          n.loadingStatus = false
        }, 200)
      })
    },
    uploadImg(index) {
      this.uploadIndex = index
    },
    getStudentFn() {
      let n = this
      this.clearDataFn()
      classesStudent(this.editForm).then(res => {
        this.studentList = res.list
        setTimeout(() => {
          n.loadingStatus = false
        }, 200)
      })
    },
    clearDataFn() {
      this.pickInfo = []
      this.studentInfo = []
      this.studentId = []
      this.studentList = []
      this.loadingStatus = false
      if (this.activeId) {
        this.activeId = null
      }
      this.delList = []
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    // 保存接送人
    saveFn() {
      if (!this.activeId) {
        this.$message.error('请选择接送学生')
        return
      }
      if (!this.pickInfo.length) {
        this.$message.error('请添加接送人信息')
        return
      }
      // for (let item of this.pickInfo) {
      //   if (!item.pic && !item.identity_card) {
      //     this.$message.error('接送人近照/接送人身份证至少需要填写一项')
      //     return
      //   }
      // }
      let dataOption = {
        student_id: this.activeId.id,
        del_id: '',
        list: JSON.stringify(this.pickInfo)
      }
      console.log('dataOption:', dataOption)
      if (this.delList.length) {
        dataOption.del_id = this.delList.join(',');
      }
      // let data_ = 1
      // if(data_){
      //   return
      // }
      pick_upAdd(dataOption).then(res => {
        console.log('res:', res)
        if (!res.code) {
          this.$message.success(res.msg)
          this.$emit('InitFn')
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    detelFn(item, index) {
      console.log('item,', item, index)
      if (item.id) {
        this.delList.push(item.id)
      }
      this.pickInfo.splice(index, 1)
    },
    // 添加接送人
    addPickUserFn() {
      if (!this.activeId) {
        this.$message.error('请选择接送学生')
        return
      }
      this.pickInfo.push({
        id: 0,
        name: '', // 	接送人名
        mobile_phone: '', // 接送人电话
        relation: '', // 与学生关系
        identity_card: '', // 接送人身份证号码
        pic: '', // 照片
      })
    },
    // 更新值
    updateVal(option) {
      // console.log('变更数据收到的数据内容：', option)
      if (option.input) {
        this.editForm[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.editForm[option.select[i].name] = option.select[i].valueText
          } else {
            this.editForm[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    handleAvatarSuccess(res, file) {
      console.log('indexlist: ', res, file, this.uploadIndex)
      // 根据后台返回格式，图片路径在res.pic中
      if (!res || (res.code !== undefined && res.code !== 0)) {
        this.$message.error(res.msg || '上传图片失败');
        return;
      }
      
      // 确保uploadIndex有效且pickInfo[this.uploadIndex]存在
      if (this.uploadIndex >= 0 && this.pickInfo[this.uploadIndex]) {
        let item = JSON.parse(JSON.stringify(this.pickInfo[this.uploadIndex]))
        // 优先使用res.pic，适配后台返回格式
        item.pic = res.pic || (res.data ? res.data.name : '') || ''
        this.$set(this.pickInfo, this.uploadIndex, item)
        
        // 显示成功提示
        if (res.msg) {
          this.$message.success(res.msg);
        }
      }
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      console.log(file)
      // const isJPG = file.type === 'image/jpeg';
      // const isLt2M = file.size / 1024 / 1024 < 2;
      //
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      // return isJPG && isLt2M;
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 860px;
  height: 70%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}


.apply-code-img img {
  width: 160px;
  height: 160px;
  margin: 60px auto 10px;
  display: block;
}

.getcode {
  width: 100%;
  text-align: center;
}

.setinfobox {
  display: flex;
  height: 100%;
}

.setinfobox-left {
  flex: 1;
  margin-right: 10px;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
}

.setinfobox-left-c {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-bottom: 1px solid #ddd;
}

.setinfobox-left-list {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.setinfobox-right {
  width: 300px;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
}

.setinfobox-right-title {
  height: 40px;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.setinfobox-right-body-footer {
  height: 40px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.setinfobox-right-body {
  flex: 1;
  overflow-y: auto;
}

.setinfobox-right-body-top-from {
  margin: 5px;
  background: #f9f9f9;
  border-radius: 5px;
  padding: 5px;
  border: 1px solid #eee;
}

.setinfobox-left-list-title {
  height: 30px;
}

.setinfobox-left-list-title span {
  flex: 1;
  text-align: center;
  line-height: 30px;
}

.setinfobox-left-list-inline {
  display: flex;
  height: 30px;
  border-bottom: 1px solid #ddd;
  background: #f4f4f4;
}

.setinfobox-left-list-body {
  flex: 1;
  overflow-y: auto;
}

.setinfobox-left-list-body p {
  text-align: center;
  padding: 40px;
  color: #999;
}

.setinfobox-right-body p {
  text-align: center;
  padding: 40px;
  color: #999;
}

.setinfobox-list {
  display: flex;
  height: 30px;
  cursor: pointer;
  border-bottom: 1px dashed #ddd;
}

.setinfobox-list .iconfont {
  color: #1dc053;
  font-size: 24px;
}

.setinfobox-list:hover {
  background: #e6f5ff;
}

.setinfobox-list.active {
  background: #e6f5ff;
}

.setinfobox-list span {
  display: block;
  flex: 1;
  text-align: center;
  line-height: 30px;
}
</style>

